<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh" v-if="Object.values(orderinfo).length != 0">
      <view class="detail">
        <view class="top">
          <image :src="imgUrl + orderinfo.teacher_avatar" mode="aspectFill" style="width: 118rpx; height: 118rpx"></image>
          <view class="right">
            <view>
              <text>{{ orderinfo.teacher_name }}</text>
              <text style="margin: 0 15rpx">{{ orderinfo.grade_name + orderinfo.subject_name }}</text>
              <text>{{ orderinfo.period_num }}课时</text>
            </view>
            <view style="margin-top: 26rpx">￥{{ orderinfo.total_money }}</view>
          </view>
        </view>
        <view class="btn">
          <view class="cancelbtn" @click="cancle">取消课时</view>
          <view class="paybtn" @click="pay">去付款</view>
        </view>
        <view v-if="!isshow" @click="isshow = true" style="display: flex; align-items: center; justify-content: center; margin-top: 20rpx">
          <view>展开</view>
          <uni-icons type="arrow-down" size="20" color="#000"></uni-icons>
        </view>
      </view>
      <view class="orderinfo" v-if="isshow">
        <view class="item">
          <view>课时总额</view>
          <view>￥{{ orderinfo.total_money }}</view>
        </view>
        <view class="item">
          <view>使用优惠券</view>
          <view style="display: flex; align-items: center">
            <view>{{ orderinfo.coupon_log_name == '' ? '' : orderinfo.coupon_log_name }}</view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
        </view>
        <view class="item">
          <view>应付款</view>
          <view style="font-weight: bold; font-size: 28rpx; color: #ff3400">￥{{ orderinfo.amount_money }}</view>
        </view>
        <view style="width: 650rpx; height: 0; border: 2rpx solid #f1f1f1"></view>
        <view class="item">
          <view>上门信息</view>
          <view style="flex: 1; padding-left: 20rpx">
            <view style="text-align: right">
              <text>{{ orderinfo.address_name }}</text>
              <text>{{ orderinfo.address_mobile4 }}</text>
            </view>
            <view style="padding-left: 40rpx">{{ orderinfo.address_detail }}</view>
          </view>
        </view>
        <view class="item">
          <view>订单编号</view>
          <view>{{ orderinfo.order_sn }}</view>
        </view>
        <view class="item">
          <view>创建时间</view>
          <view>{{ orderinfo.cereateTime }}</view>
        </view>
        <!-- 收起、展开 -->
        <view style="display: flex; align-items: center; justify-content: center" @click="changeheight">
          <view>收起</view>
          <image src="../../static/icon/top.png" mode="aspectFill" style="width: 30rpx; height: 30rpx; margin-left: 8rpx"></image>
        </view>
      </view>
      <!-- 教师列表 -->
      <view class="teacherlist">
        <view class="listitem" v-for="item in tuijian" :key="item.id" @click="goteacherdetail(item.id)">
          <image :src="imgUrl + item.avatar" mode="aspectFill" style="width: 186rpx; height: 186rpx"></image>
          <view class="right">
            <view class="righttop">
              <view style="display: flex; align-items: center">
                <view class="username">{{ item.byname }}</view>
                <view class="usercareer">{{ item.identity_name }}</view>
              </view>
              <view style="font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 26rpx; color: #222222">{{ item.host_grade + '/' + item.host_subject }}</view>
            </view>
            <view class="rightmiddel">
              <view class="teachage">教龄{{ item.teaching_len }}年</view>
              <view class="money">￥{{ item.price }}/起</view>
            </view>
            <view class="rightbottom">
              <view class="hobbylist">
                <view class="hobbyitem" v-for="(item, index) in item.keyword" :key="index">{{ item }}</view>
              </view>
              <view class="long">{{ item.distance }}km</view>
            </view>
          </view>
        </view>
      </view>
      <view class="bottombtn">
        <view class="quxiao" @click="cancle">取消订单</view>
        <view class="fukuan" @click="pay">去付款</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      isshow: true,
      imgUrl: '', // 图片的及地址
      currentId: '', // 当前的订单id
      orderinfo: {}, // 订单的数据
      tuijian: [], // 推荐列表
      teacherid: '' // 教师id
    };
  },
  methods: {
    // 跳转到教师详情
    goteacherdetail(id) {
      uni.redirectTo({
        url: '/parents/teacherdetail/teacherdetail?id=' + id
      });
    },
    // 获取推荐列表
    gettuijian() {
      uni.getLocation({
        success: async (res) => {
          console.log('经纬度', res);
          const res2 = await uni.$http.post('/patriarch/getTeacherList', {
            teacher_id: this.teacherid, // this.orderinfo.teacher_id
            lat: res.latitude,
            lon: res.longitude
          });
          console.log('推荐的列表', res2);
          this.tuijian = res2.data.data;
        }
      });
    },
    // 获取订单详情
    async getorderdetail(id) {
      const res = await uni.$http.post('/user_order/details', {
        order_id: id
      });
      console.log('订单详情', res);
      this.orderinfo = res.data.data;
      this.orderinfo.cereateTime = dayjs(this.orderinfo.createtime * 1000).format('YYYY-MM-DD HH-mm-ss');
    },
    // 取消订单
    async cancle() {
      await uni.$http.post('/user_order/cancelOrder', {
        order_id: this.currentId
      });
    },
    // 支付
    async pay() {
      const res = await uni.$http.post('/user_order/orderPay', {
        order_id: this.currentId
      });
      console.log('支付的信息', res);
      uni.requestPayment({
        provider: 'wxpay',
        package: res.data.data.package,
        paySign: res.data.data.paySign,
        nonceStr: res.data.data.nonceStr,
        timeStamp: res.data.data.timeStamp,
        signType: res.data.data.signType,
        success: (res3) => {
          console.log('支付结果', res3);
          uni.navigateTo({
            url: '/parents/payok/payok'
          });
        },
        fail: (res) => {
          uni.navigateTo({
            url: '/parents/payfalse/payfalse'
          });
        }
      });
    },
    changeheight() {
      this.isshow = false;
    }
  },
  async onLoad(e) {
    // 传递的订单号
    console.log(e.id);
    this.currentId = e.id;
    this.teacherid = e.teacherid;
    // 图片的基地址
    this.imgUrl = this.imgurl;
    // 获取订单详情
    await this.getorderdetail(e.id);
    // 获取推荐的教师列表
    this.gettuijian();
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding-bottom: 100rpx;
  .detail {
    box-sizing: border-box;
    padding: 30rpx;
    border-bottom: 2rpx solid #f1f1f1;
    background-color: #fff;
    margin-top: 20rpx;
    margin-left: 20rpx;
    .top {
      display: flex;
      .right {
        margin-left: 18rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      .cancelbtn {
        box-sizing: border-box;
        width: 160rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        color: #333333;
        font-weight: 500;
        font-size: 28rpx;
        background: #f1f1f1;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
      .paybtn {
        box-sizing: border-box;
        width: 160rpx;
        height: 60rpx;
        margin-left: 22rpx;
        text-align: center;
        line-height: 60rpx;
        background: #3553e8;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }
    }
  }
  .orderinfo {
    box-sizing: border-box;
    width: 710rpx;
    height: 590rpx;
    padding: 30rpx;
    background-color: #fff;
    margin-left: 20rpx;

    .item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .teacherlist {
    background-color: #fff;
    margin-top: 20rpx;
    transition: all 0.6s;
    .listitem {
      box-sizing: border-box;
      display: flex;
      width: 710rpx;
      height: 230rpx;
      padding: 16rpx 20rpx 28rpx 20rpx;
      margin-bottom: 30rpx;
      .right {
        flex: 1;
        margin-left: 20rpx;
        .righttop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .usercareer {
            box-sizing: border-box;
            width: 104rpx;
            height: 40rpx;
            background: #eaedfd;
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #3553e8;
            text-align: center;
            line-height: 40rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .username {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #222222;
            margin-right: 14rpx;
          }
        }
        .rightmiddel {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 12rpx;
          .teachage {
            font-weight: 500;
            font-size: 26rpx;
            color: #222222;
          }
          .money {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #ff3400;
          }
        }
        .rightbottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 40rpx;
          .hobbylist {
            display: flex;
            align-items: center;
            .hobbyitem {
              box-sizing: border-box;
              height: 40rpx;
              background: #ffffff;
              border-radius: 20rpx 20rpx 20rpx 20rpx;
              border: 1rpx solid #3553e8;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #3553e8;
              margin-right: 10rpx;
              text-align: center;
              line-height: 30rpx;
              padding: 4rpx 12rpx;
              text-overflow: ellipsis; /* 溢出显示省略号 */
              overflow: hidden; /* 溢出隐藏 */
              white-space: nowrap; /* 强制不换行 */
            }
          }
          .long {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #222222;
          }
        }
      }
    }
  }
  .bottombtn {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 750rpx;
    height: 120rpx;
    padding: 20rpx;
    background-color: #fff;
    .quxiao {
      box-sizing: border-box;
      width: 180rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      background: #f1f1f1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
    .fukuan {
      box-sizing: border-box;
      width: 180rpx;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
      background: #3553e8;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
<style>
page {
  background-color: #f5f5f5;
}
</style>
